<template>
  <h1>TestWatch</h1>

  <div>
    <button @click="counter++">+1</button>
    {{ counterStr }}
  </div>

  <div>
    <button @click="state.isOn = !state.isOn">Toggle</button>
    {{ state.isOn }}
  </div>
</template>

<script>
import {ref, reactive, watch, computed} from 'vue'

export default {
  name: "TestWatch",
  setup() {
    const counter = ref(1)
    const counterStr = computed(() => `Computed counter ${counter.value + 1000}` )

    const state = reactive({
      isOn: false
    })

    watch([counter, () => state.isOn], (nv, ov) => {
      console.log(`Watch counter changed`)
      console.log('Old value:', ov)
      console.log('New value:', nv)
    })

    return {
      counter,
      counterStr,
      state
    }
  }
}
</script>

<style scoped>

</style>
